<template>
  <div class="customer">
    <van-nav-bar
        title="我的客户信息列表"
        left-arrow
        left-text="返回"
        @click-left="back"
    />
    <van-search
        v-model="fname"
        show-action
        background="#57a3f3"
        placeholder="请输入名称"
    >
      <template #action>
        <van-button size="small" type="info" @click="onSearch()" style="width: 60px;">查询</van-button>
      </template>
    </van-search>
    <!--操作按钮-->
    <div class="actionButton">
      <van-button size="small" icon="plus" type="info" @click="toAdd">新增</van-button>
      <van-button style="margin-left: 4px" size="small" icon="search" type="info" @click="superQuery">高级查询</van-button>
    </div>
    <!--切换页签-->
    <van-tabs v-model="activeKey" color="#1989fa" @click="changeTabs">
      <van-tab title="我负责的" name="1"></van-tab>
      <van-tab title="共享我的" name="2"></van-tab>
      <van-tab title="下属的" name="3"></van-tab>
      <van-tab title="我关注的" name="6"></van-tab>
    </van-tabs>
    <!--表格区域--->
    <div style="width: 100%;height: 100%;background: #ffffff;margin-top: 10px">
      <van-list style="overflow: scroll">
        <div class="listColumn">
          <div>创建时间</div>
<!--          <div>创建人</div>-->
          <div>来源</div>
          <div>性质</div>
<!--          <div>代码</div>-->
          <div>名称</div>
          <div>审核状态</div>
          <div>共享人员</div>
          <div>操作</div>
        </div>
        <div class="listItem" v-for="(task, index) in taskList" :key="index" @click.stop="toDetail(task)">
          <div>{{ task.createTime }}</div>
<!--          <div>{{ task.createBy }}</div>-->
          <div>{{ task.fsourceName }}</div>
          <div>{{ task.fcompanyNatureName }}</div>
<!--          <div>{{ task.fnumber }}</div>-->
          <div>{{ task.fname }}</div>
          <div>{{ task.fstatusName }}</div>
          <div>{{ task.fshareName }}</div>
          <div>
            <div class="btnWrapper">
              <a class="btn1" @click.stop="toDetail(task)">详情</a>
              <a v-show="task.fstatus == 0 && task.ismanager == 1" class="btn1" @click.stop.prevent="toEdit(task)">编辑</a>
              <a v-show="task.fstatus == 0 && task.ismanager == 1" class="btn2" @click.stop="toDelete(task)">删除</a>
              <a v-show="task.fstatus == 0 && task.ismanager == 1" class="btn3" @click.stop="toCheck(task)">审核</a>
              <a v-show="task.fstatus == 1 && task.ismanager == 1" class="btn3" @click.stop="toUnCheck(task)">反审核</a>
              <a v-show="task.isfollow == 0" class="btn3" @click.stop="toFollow(task)">关注</a>
              <a v-show="task.isfollow == 1" class="btn3" @click.stop="toUnFollow(task)">取消关注</a>
              <a v-show="task.isgx == 1" class="btn3" @click.stop="toShare(task)">共享</a>
            </div>

          </div>
        </div>
      </van-list>
    </div>
    <!--分页-->
    <div>
      <van-pagination v-model="pageNo" mode="simple" :total-items="total" :show-page-size="6" :items-per-page="pageSize" force-ellipses @change="changePg">
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
        <template #page="{ text }">{{ text }}</template>
      </van-pagination>
    </div>
    <!--高级筛选-->
    <van-popup v-model="searchVisible" position="top" closeable close-icon="close" :style="{height: '45%'}">
      <div style="margin-top: 15px">
        <van-cell-group>
          <van-field label="联系人或电话" v-model="fusername" placeholder="请输入联系人或电话" />
        </van-cell-group>
        <van-cell-group>
          <van-field label="创建人" v-model="createBy" placeholder="请输入创建人" />
        </van-cell-group>
        <van-cell-group>
          <van-field label="共享人员" v-model="fshareName" placeholder="请输入共享人员" />
        </van-cell-group>
        <van-cell-group>
          <van-field readonly clickable @click="chooseFun('审核状态', columnsSjstatus, 1)" label="审核状态" v-model="fstatusName" placeholder="请选择审核状态" />
        </van-cell-group>
        <van-cell-group>
          <van-field label="创建时间" readonly clickable @click="onChangeDate" v-model="createTimeRange" placeholder="请选择创建时间" />
        </van-cell-group>
        <div class="super-search">
          <van-button block @click="searchReset">重置</van-button>
          <van-button block type="info" @click="searchQuery">确定</van-button>
        </div>
      </div>
    </van-popup>
    <!--多个日期-->
    <van-calendar v-model="dateShow" type="range" @confirm="onConfirm" />
    <!--选择-->
    <van-popup v-model="showPickerFun" position="bottom">
      <van-picker
          :title="choosetitle"
          show-toolbar
          :columns="columnsFun"
          @confirm="changeFun"
          @cancel="showPickerFun = false"
      />
    </van-popup>
    <!--共享-->
    <choose-share-customer-modal ref="chooseShareCustomerModal" @ok="backShareCustomer"></choose-share-customer-modal>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { customerList, deleteCustomer, doCheckCustomer, doUnCheckCustomer, doFollowCustomer, doUnFollowCustomer, getDicts, doShareCustomer } from '@/api/api'
import { Notify, Dialog, Toast } from 'vant'
import moment from "moment";
import {filterObj} from "../../utils/utils";
import ChooseShareCustomerModal from "./modules/chooseShareCustomerModal";

var sha1 = require('js-sha1')

export default {
  name: "customerList",
  components: {
    ChooseShareCustomerModal
  },
  data () {
    return {
      fusername: '',
      activeKey: '1',
      curId: '',
      ftype: '',
      choosetitle: '',
      fname: '',
      createBy: '',
      fshareName: '',
      fstatus: '',
      fstatusName: '',
      createTime_begin: '',
      createTime_end: '',
      createTimeRange: '',
      pageNo: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      searchVisible: false,
      dateShow: false,
      showPickerFun: false,
      taskList: [],
      columnsSjstatus: [],
      columnsFun: [],
    }
  },
  computed: {
    ...mapState({
      openId: state => state.user.openId,
      access_token: state => state.app.access_token,
      ticket: state => state.app.ticket,
      appId: state => state.user.appId
    })
  },
  mounted() {
  },
  created () {
    this.getList(1)
    getDicts('fchecked').then(res => {
      if(res.success) {
        this.columnsSjstatus = res.result.map(item => {
          return {
            text: item.text,
            code: item.value
          }
        })
      }
    })
  },
  methods: {
    changeTabs (key) {
      let that=this;
      that.activeKey = key
      that.getList();
    },
    searchReset () {
      this.fname = ''
      this.fstatus = ''
      this.fstatusName = ''
      this.createTimeRange = ''
      this.createTime_begin = ''
      this.createTime_end = ''
      this.fshareName = ''
      this.fusername = ''
      this.activeKey = '1'
    },
    searchQuery () {
      this.searchVisible = false
    },
    superQuery () {
      this.searchVisible = true
    },
    onChangeDate () {
      this.dateShow = true
    },
    onConfirm (date) {
      console.log(date)
      this.createTime_begin = moment(date[0]).format('YYYY-MM-DD')
      this.createTime_end = moment(date[1]).format('YYYY-MM-DD')
      this.createTimeRange = moment(date[0]).format('YYYY-MM-DD') + '~' + moment(date[1]).format('YYYY-MM-DD')
      this.dateShow = false
    },
    chooseFun (title, columns, ftype) {
      this.showPickerFun = true
      this.ftype = ftype
      this.choosetitle = title
      this.columnsFun = columns
    },
    changeFun (value, index) {
      console.log(value, index)
      switch (this.ftype) {
        case 1:
          this.fstatusName = value.text
          this.fstatus = value.code
          break;
      }
      this.showPickerFun = false
    },
    onSearch () {
      this.getList(1)
    },
    getList (pageNo) {
      let params = filterObj({
        fname: this.fname,
        createBy: this.createBy,
        fstatus: this.fstatus,
        createTime_begin: this.createTime_begin,
        createTime_end: this.createTime_end,
        fshareName: this.fshareName,
        flisttype: this.activeKey,
        fusername: this.fusername
      })
      customerList({
        ...params,
        pageNo: pageNo,
        pageSize: this.pageSize
      }).then(res => {
        if (res.success) {
          this.taskList = res.result.records
          this.total = res.result.total
        }else {
          Notify({ type: 'danger', message: res.message, duration: 4000 })
        }

      })
    },
    changePg () {
      this.getList(this.pageNo)
    },
    toAdd () {
      this.$router.push({name: 'customerAdd', params: {isAdd: true}})
    },
    toEdit (task) {
      this.$router.push({name: 'customerAdd', params: {isAdd: false, id: task.id }})
    },
    toDetail (task) {
      this.$router.push({name: 'customerAdd', params: {id: task.id, isDetail: true }})
    },
    toDelete(task) {
      Dialog.confirm({
        message: '是否删除该条管理信息数据？',
      }).then(() => {
        deleteCustomer({id: task.id}).then(res => {
          if (res.success) {
            Notify({ type: 'success', message: '我的客户信息删除成功!', duration: 4000 })
            this.onSearch()
          }else {
            Notify({ type: 'warning', message: res.message, duration: 4000 })
          }
        })
      })
          .catch(() => {
            // on cancel
          });
    },
    toCheck (task) {
      Dialog.confirm({
        message: '是否审核该条管理信息数据？',
      }).then(() => {
        doCheckCustomer({id: task.id}).then(res => {
          if (res.success) {
            Notify({ type: 'success', message: '管理信息审核成功!', duration: 4000 })
            this.onSearch()
          }else {
            Notify({ type: 'warning', message: res.message, duration: 4000 })
          }
        })
      })
          .catch(() => {
            // on cancel
          });
    },
    toUnCheck (task) {
      Dialog.confirm({
        message: '是否反审核该条管理信息数据？',
      }).then(() => {
        doUnCheckCustomer({id: task.id}).then(res => {
          if (res.success) {
            Notify({ type: 'success', message: '管理信息反审核成功!', duration: 4000 })
            this.onSearch()
          }else {
            Notify({ type: 'warning', message: res.message, duration: 4000 })
          }
        })
      })
          .catch(() => {
            // on cancel
          });
    },
    toFollow (task) {
      Dialog.confirm({
        message: '是否关注该条管理信息数据？',
      }).then(() => {
        doFollowCustomer({id: task.id}).then(res => {
          if (res.success) {
            Notify({ type: 'success', message: '管理信息关注成功!', duration: 4000 })
            this.onSearch()
          }else {
            Notify({ type: 'warning', message: res.message, duration: 4000 })
          }
        })
      })
          .catch(() => {
            // on cancel
          });
    },
    toUnFollow (task) {
      Dialog.confirm({
        message: '是否取消关注该条管理信息数据？',
      }).then(() => {
        doUnFollowCustomer({id: task.id}).then(res => {
          if (res.success) {
            Notify({ type: 'success', message: '管理信息取消关注成功!', duration: 4000 })
            this.onSearch()
          }else {
            Notify({ type: 'warning', message: res.message, duration: 4000 })
          }
        })
      })
          .catch(() => {
            // on cancel
          });
    },
    toShare (task) {
      this.curId = task.id
      this.$refs.chooseShareCustomerModal.show()
    },
    backShareCustomer (info) {
      console.log(info)
      let data = info.result
      let formData = {
        id: this.curId,
        fuserids: data.map(item => item.id).join(),
        fusers: data.map(item => item.username).join()
      }
      doShareCustomer(formData).then(res => {
        if(res.success){
          Notify({ type: 'success', message: '管理信息共享成功!', duration: 4000 })
          this.onSearch()
        } else {
          Notify({ type: 'warning', message: res.message, duration: 4000 })
        }
      })
    },
    back () {
      this.$router.push({name: 'modules'})
    },
  }
}
</script>

<style scoped>
.customer{
  min-height: 100vh;
  background: #ffffff;
}
.actionButton {
  display: flex;
  flex-direction: row;
  margin: 4px;
}
.listColumn{
  width: 1080px;
  display: flex;
  line-height: 45px;
  background: #eee;
}
.listColumn div:nth-of-type(1) {
  width: 120px;
}
.listColumn div:nth-of-type(2) {
  width: 120px;
}
.listColumn div:nth-of-type(3) {
  width: 120px;
}
.listColumn div:nth-of-type(4) {
  width: 200px;
}
.listColumn div:nth-of-type(5) {
  width: 100px;
}
.listColumn div:nth-of-type(6) {
  width: 200px;
}
/*.listColumn div:nth-of-type(7) {*/
/*  width: 120px;*/
/*}*/
/*.listColumn div:nth-of-type(8) {*/
/*  width: 120px;*/
/*}*/
.listColumn div:last-child {
  width: 200px;
}
.listItem{
  width: 1080px;
  display: flex;
  line-height: 38px;
  border-bottom: 1px solid #eeeeee;
}
.listItem div:nth-of-type(1) {
  width: 120px;
}
.listItem div:nth-of-type(2) {
  width: 120px;
}
.listItem div:nth-of-type(3) {
  width: 120px;
}
.listItem div:nth-of-type(4) {
  width: 200px;
  white-space: nowrap;       /* 确保文本不会换行 */
  overflow: hidden;          /* 隐藏溢出的内容 */
  text-overflow: ellipsis;
}
.listItem div:nth-of-type(5) {
  width: 100px;
  /*white-space: nowrap;       !* 确保文本不会换行 *!*/
  /*overflow: hidden;          !* 隐藏溢出的内容 *!*/
  /*text-overflow: ellipsis;   !* 显示省略号来代表被修剪的文本 *!*/
}
.listItem div:nth-of-type(6) {
  width: 200px;
  white-space: nowrap;       /* 确保文本不会换行 */
  overflow: hidden;          /* 隐藏溢出的内容 */
  text-overflow: ellipsis;
}
/*.listItem div:nth-of-type(7) {*/
/*  width: 120px;*/
/*}*/
/*.listItem div:nth-of-type(8) {*/
/*  width: 120px;*/
/*}*/
.listItem div:last-child {
  width: 200px;
}
.super-search {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;;
}
.van-sidebar-item--select::before {
  background-color: #1989fa;
}
.btnWrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  color: #1989fa;
}
.btn1 {

}
.btn2 {

}
.btn3 {

}
.uploadWrapper {
  display: flex;
  flex-direction: column;
  color: #1989fa;
  font-size: 14px;
}
</style>